<template>
  <view class="viewport">
    <!-- #ifndef MP-TOUTIAO -->
    <!-- 自定义导航栏 -->
    <uni-nav-bar class="uni-nav-bar" background-color="rgba(255,255,255,0)" :border="false" :statusBar="true"
      @clickLeft="goBack">
      <template #left>
        <view class="icon-arrow-left"></view>
      </template>
      <template #default>
        <view class="title">速记卡片</view>
      </template>
    </uni-nav-bar>
    <!-- #endif -->
    <!-- 抖音小程序顶部导航 -->
    <!-- #ifdef MP-TOUTIAO -->
    <view class="toutiao-nav-bar">
      <view class="status-bar"></view>
      <view class="title-container">
        <view class="title">速记卡片</view>
      </view>
    </view>
    <!-- #endif -->
    <view class="shorhand-card-top">
      <view class="shorhand-card-top-left">
        <view class="shorhand-card-top-title">专项考点</view>
        <view class="shorhand-card-top-desc">系统归纳，刷题效率加倍</view>

      </view>
      <view class="shorhand-card-top-right">
        <image class="shorhand-card-top-img" src="@/pagesExercise/static/image/shorthand_card/page-main.png"
          mode="widthFix" />
      </view>
    </view>
    <view class="shorhand-card-main">
      <uv-tabs :list="[{ name: '科目一' }, { name: '科目四' }]" lineColor="#b35936" lineWidth="40rpx" lineHeight="6rpx"
        :activeStyle="{
          color: '#292522',
          fontSize: '36rpx',
          fontWeight: 'bold',
          transform: 'scale(1.05)'
        }" :inactiveStyle="{
          fontSize: '28rpx',
          color: '#292522',
          transform: 'scale(1)'
        }" itemStyle=" height: 90rpx;" :scrollable="false" :current="activeIndex" @change="tabsChange"></uv-tabs>
      <swiper class="swiper" :current="activeIndex" @change="swiperChange">
        <swiper-item>
          <view class="swiper-content-view">
            <view class="know-summary-item" :class="activeKnowSummaryClassesIndex.includes(index) ? 'active' : ''"
              v-for="(item, index) in knowSummaryClasses?.filter(item => item.baseType == 'km1')" :key="index"
              @tap="toShorthandCardDetails(item.baseType!, index)">
              <view class="know-summary-title">{{ item.name }}</view>
              <image class="know-summary-img" :src="item.iconPath" mode="widthFix" />
            </view>
          </view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-content-view">
            <view class="know-summary-item" :class="activeKnowSummaryClassesIndex.includes(index) ? 'active' : ''"
              v-for="(item, index) in knowSummaryClasses?.filter(item => item.baseType == 'km4')" :key="index"
              @tap="toShorthandCardDetails(item.baseType!, index)">
              <view class="know-summary-title">{{ item.name }}</view>
              <image class="know-summary-img" :src="item.iconPath" mode="widthFix" />
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { ref, computed } from 'vue'
  import { useLearnBaseTypes, useBaseInfo } from '@/composables/LearnBase'

  // #ifdef MP-TOUTIAO
  // 获取小程序下胶囊按钮的布局位置信息
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  // 上边界坐标，单位：px
  let top = (menuButtonInfo.top - 10) + 'px'
  const statusBarHeight = ref(top)
  // 高度，单位：px
  let height = (menuButtonInfo.height + 20) + 'px'
  const titleHeight = ref(height)
  // #endif

  // 题库信息
  const baseInfo = useBaseInfo()
  // 考点总结分类
  const knowSummaryClasses = computed(() => baseInfo.knowSummaryClasses)

  //活动的分类
  const activeKnowSummaryClassesIndex = ref<number[]>([1, 2, 5, 6, 9])
  const activeIndex = ref<number>(0)
  // tabs通知swiper切换
  const tabsChange = (item: any) => {
    activeIndex.value = item.index
  }

  // swiperChange
  const swiperChange = (e: UniHelper.SwiperOnChangeEvent) => {
    activeIndex.value = e.detail.current
  }

  // 去速记卡片详情
  const toShorthandCardDetails = (baseType: string, shorthandCardIndex: number) => {
    uni.navigateTo({ url: `/pagesExercise/shorthandCardDetails/shorthandCardDetails?baseType=${baseType}&shorthandCardIndex=${shorthandCardIndex}` })
  }
  //退出
  const goBack = () => {
    uni.navigateBack()
  }
</script>

<style lang="scss" scoped>


  // 自定义导航栏
  .uni-nav-bar {
    .icon-arrow-left {
      font-size: 18px;
      font-weight: bold;
    }

    .title {
      flex: 1;
      align-self: center;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
    }
  }

  /* #ifdef MP-TOUTIAO */
  // 抖音自定义导航栏
  .toutiao-nav-bar {

    // 顶部占位
    .status-bar {
      width: 100vw;
      height: v-bind(statusBarHeight);
    }

    // 标题行
    .title-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      height: v-bind(titleHeight);

      .title {
        // margin-left: 40rpx;
        font-size: 18px;
      }
    }
  }

  /* #endif */
  .viewport {
    display: flex;
    flex-direction: column;
    background: #f8f8f8;
    background-image: url('@/pagesExercise/static/image/shorthand_card/page-bg.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
  }

  .shorhand-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;

    .shorhand-card-top-left {
      .shorhand-card-top-title {
        margin-top: 80rpx;
        font-size: 60rpx;
        color: #353733;
        font-weight: bold;
      }

      .shorhand-card-top-desc {
        margin-top: 10rpx;
        font-size: 24rpx;
        color: #72757b;
      }
    }

    .shorhand-card-top-right {
      .shorhand-card-top-img {
        width: 298rpx;
      }
    }
  }

  .shorhand-card-main {
    margin: 20rpx 30rpx 0;
    padding: 20rpx 0;
    height: 1040rpx;
    background-color: #ffffff;
    box-shadow: 2rpx 2rpx 21rpx 0rpx rgba(224, 208, 192, 0.06);
    border-radius: 10rpx;

    .swiper {
      .swiper-content-view {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0 30rpx;

        .know-summary-item {
          display: flex;
          justify-content: space-around;
          align-items: center;
          width: 300rpx;
          height: 140rpx;
          margin-top: 35rpx;
          background-color: #f8f9fb;
          box-shadow: 0rpx 3rpx 26rpx 1rpx rgba(0, 0, 0, 0.1);
          border-radius: 12rpx;

          &.active {
            background-color: #fffcf7;
          }

          .know-summary-title {
            margin-top: -10rpx;
            font-size: 33rpx;
            color: #1d2223;
          }

          .know-summary-img {
            width: 94rpx;
          }
        }
      }
    }

  }



</style>
